import React, { Component } from 'react';
import ReactDom from 'react-dom';
import './todo.css'
import 'antd/dist/antd.css';
import { Button, DatePicker } from 'antd';
import { Input } from 'antd';
import { List, Avatar } from 'antd';

import { Layout } from 'antd';

const { Header, Footer, Sider, Content } = Layout;




// TodoList组件
class TodoList extends Component {
  constructor(props){
    super(props);
    this.state = {
      todolist1 : ["吃饭","睡觉","打游戏"],
      todolist2 : ["看书","运动"],
      inputValue : ''
    }
  }

  // 监听输入框里面的内容
  inputChange = (e) => {
    this.setState({
      inputValue : e.target.value
    })
  }
  //ToDoList
  render() {
    return (
      <div className='div0'>
    <Layout>
     
     
      <Header style={{backgroundColor:"black",color:"white"}}>ToDoList</Header>
   
      <Content>
        <Input placeholder="Basic usage" onChange={this.inputChange} value={this.state.inputValue} style={{marginLeft:'10%',width:'70%',float:'left'}}/>
        <Button type="primary" onClick={()=>{
          //增加数据
              if(this.state.inputValue === ''){
                alert("请输入内容！");
                return;
              }
              this.setState({
                todolist1 : [...this.state.todolist1,this.state.inputValue],
                inputValue : ''
              })
              localStorage.setItem('todolist1', [...this.state.todolist1,this.state.inputValue]);

        }} className='btn' style={{float:'left'}}>增加</Button>
      </Content>
      <Layout>
  
      <Content>
      <List
          header={<div>ToDo</div>}
          size="large"
          bordered
          split
          dataSource= {this.state.todolist1}
          renderItem={(item,index)=>(
            <List.Item><div>{item}</div><Button type="primary"  onClick={()=>{
              //更改数据
              console.log(index)
              let list = [...this.state.todolist1];
              let todo =[...this.state.todolist2]
              var thg = list[index]
              console.log(list)
              console.log(todo)
              list.splice(index,1);
              todo.splice(todo.length,0,thg);
              this.setState({
              todolist1 : list
              })
              localStorage.setItem('todolist1',list);
              this.setState({
              todolist2 : todo
              })
              localStorage.setItem('todolist2',todo);
            }}>
            已做</Button>
            </List.Item>
            
          )}
         
        />
      </Content>
      <Content>
      <List
          header={<div>Did</div>}
          size="large"
          bordered
          dataSource= {this.state.todolist2}
          renderItem={(item,index)=>(
            <List.Item><div>{item}</div><Button type="primary"  onClick={()=>{
              //删除数据
              let todo = [...this.state.todolist2];
              console.log(index)
              todo.splice(index,1);
              this.setState({
                todolist2 : todo
              })
              localStorage.setItem('todolist2',todo);

            }}>删除</Button></List.Item>
            
          )}
         
        />
      </Content>
      </Layout>
    </Layout>
      </div>
    );
  }
}

ReactDom.render(<TodoList />,document.getElementById("root"));
